<!--
 * @Date: 2023-02-21 17:21:21
 * @LastEditors: mengqingchen mengqc1995@163.com
 * @LastEditTime: 2023-04-07 17:21:31
 * @FilePath: \sososn-web-new\src\views\bulkIndustry\component\bulkTop.vue
-->
<template>
  <div
    class="group"
    :style="{ background: `url(${imgUrl}) no-repeat`, 'background-size': '100% 100%' }"
  >
    <h1 class="text-1">{{ bannerTitle }}</h1>
    <p class="text-2">{{ bannerContent }}</p>
    <div class="flex-row section">
      <a :href="toLook" target="_blank"><div class="group-btn">查看平台</div></a>
      <div class="group-btn1 items-center justify-center">
        视频介绍&nbsp;&nbsp;<svg-icon icon-class="video" name="video" />
      </div>
    </div>
  </div>
</template>

<script setup>
const { bulkTop } = inject('productData')
let imgUrl = bulkTop.imgUrl
let bannerTitle = bulkTop.bannerTitle
let bannerContent = bulkTop.bannerContent
let toLook = bulkTop.toLook
</script>

<style lang="scss" scoped>
.group {
  height: 700px;
  padding: 150px 240px;

  .text-1 {
    margin-bottom: 24px;
    font-size: 46px;
    font-weight: 500;
    color: #333;
  }

  .text-2 {
    width: 876px;
    font-family: PingFangSC-Regular, 'PingFang SC';
    font-size: 20px;
    font-weight: 400;
    color: #495062;
  }

  .section {
    margin-top: 140px;
  }

  .group-btn,
  .group-btn1 {
    width: 142px;
    height: 49px;
    margin-right: 30px;
    font-size: 18px;
    line-height: 49px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
  }

  .group-btn {
    color: #fff;
    background: #009cff;
    box-shadow: 0 2px 11px 0 #e4e8ee;

    &:hover {
      background: #35b0ff;
      box-shadow: 0 2px 11px 0 #e4e8ee;
    }
  }

  .group-btn1 {
    width: 142px;
    height: 49px;
    line-height: 49px;
    color: #009cff;
    background: rgb(255 255 255 / 1%);
    border: 1px solid #009cff;
    border-radius: 4px;
  }

  // .group-btn:hover{

  // }
}
</style>
